<template>
  vue3
  <ChildSecond id="xxx" :title="'xyz'" :xxxx="fatherA"></ChildSecond>
  <ChildSecond ref="c1" :title="'abc'" @yyyy="fatherB">
    <template #default="scope">
      <span>xxxx{{ scope }}</span>
      <span>uuuu</span>
    </template>
    <template #middle>
      <span>named</span>
    </template>
  </ChildSecond>
  <!--const c1 =  new ChildSecond('abc',fatherB) -->

  <!-- Input 升级版 Autocomplete -->
  <ElAutocomplete
    placeholder=""
    v-model="roomId"
    :fetch-suggestions="search"
    value-key="id"
    @select="selected"
  ></ElAutocomplete>
  <ElButton type="warning" @click="fatherA">父组件自己调用</ElButton>
  <ElButton @click="fatherC">父组件调用子组件方法</ElButton>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import ChildSecond from '@/components/ChildSecond.vue'
const roomId = ref('')
const rooms = [
  { id: '111', label: '标准间' },
  { id: '102', label: '大床房' },
  { id: '211', label: '标准间' },
  { id: '110', label: '大床房' }
]
// const search = (a,b,c) => {
const search = (inputValue, callback) => {
  console.log('----')
  //   console.log(a,b,c)
  console.log('input value', inputValue, callback)
  let result = []
  if (inputValue) {
    result = rooms.filter((x) => x.id.startsWith(inputValue))
  } else {
    result = rooms
  }
  console.log('内容', result)
  callback(result)
  // return result
}
const selected = (room) => {
  console.log('----=====---什么时间触发')
  // console.log("a",a,"b",b,c)
  console.log('选中的room', room)
}

const fatherA = (a, b) => {
  console.log('fa-4')
  console.log('fa-5', a, b)
  console.log('fa-6')
}

const fatherB = (a, b, c) => {
  console.log('fb-4')
  console.log('fb-5', a, b, c)
  console.log('fb-6')
}

const c1 = ref(null)

onMounted(() => {
  console.log('xxx', c1)
})
const fatherC = () => {
  //   console.log(c1.value)
  // 父组件使用dom思维调用子组件里暴露的方法
  // 不是MVVM 是Dom
  c1.value.ChildC(rooms)
}
</script>
